<template>
	<view class="flex-col h100">
		<view class="">
			<u-navbar title="三违信息管理" :placeholder="true" leftIconColor="#fff" titleStyle="color: #fff" bgColor="#2172FC" :autoBack="true">
				<template #right>
					<u-icon name="plus" color="#fff" size="25" @click="add"></u-icon>
					<u-icon class="p-l-10" name="search" color="#fff" size="25" @click="openPopup"></u-icon>
				</template>
			</u-navbar>
		</view>
		<view class="p-10">
			<template v-if="list.length > 0">
				<view class="card" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
					<view class="flex m-between">
						<view class="name fw">
							审批状态 :
							<span :style="{ color: item.states === 1 ? 'green' : item.states === 0 ? 'red' : '' }">
								{{ stateList.find((i) => i.dictValue == item.states).dictLabel }}
							</span>
						</view>
					</view>
					<view class="flex m-between m-t-8">
						<view class="post">危害类型 : {{ item.damage }}</view>
						<view class="pro">事件类型 : {{ item.event }}</view>
					</view>
					<view class="flex m-between m-t-8">
						<view class="post">条款类型 : {{ item.item }}</view>
						<view class="pro">上报人 : {{ item.upName }}</view>
					</view>
					<view class="flex m-between m-t-8" v-if="item.breakLocation">
						违章地点 :
						<up-text :lines="1" :text="item.breakLocation"></up-text>
					</view>
					<view class="flex m-between m-t-8">
						<view class="post">违章时间 : {{ item.breakTime }}</view>
					</view>
				</view>
			</template>
			<u-empty v-else mode="data"></u-empty>
		</view>
	</view>
	<my-popup :show="showPopup" :queryParams="queryParams" :formItem="formData" @close="closePopup" @reset="reset" @submit="submit"></my-popup>
	<u-back-top :scroll-top="scrollTop" top="600" duration="300"></u-back-top>
</template>
<script setup>
import { computed, reactive, ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import useList from '@/hooks/useList.js';
import { pageVioEvents, pageVioType, pageVioItem, pageSeniorVioEvent } from '@/api/manage.js';
import { getDicts } from '@/api/public.js';

const stateList = ref([]);
let queryParams = reactive({
		states: [1, 2, 3, 0]
	}),
	formData = computed(() => {
		return [
			// {
			// 	label: '状态',
			// 	prop: 'states',
			// 	itemType: 'select',
			// 	list: stateList.value
			// },
			{
				label: '事件类型',
				prop: 'eventId',
				itemType: 'select',
				list: EventList.value,
				fileType: { label: 'eventName', value: 'id' }
			},
			{
				label: '条款类型',
				prop: 'itemId',
				itemType: 'select',
				list: TypeList.value,
				fileType: { label: 'itemName', value: 'id' }
			},
			{
				label: '违章条款',
				prop: 'violationId',
				itemType: 'select',
				list: ItemList.value,
				fileType: { label: 'violationsClause', value: 'id' }
			}
		];
	});
// 重置表单
const reset = () => {
	// queryParams.states = [1, 2, 3, 0];
	queryParams.eventId = '';
	queryParams.violationId = '';
	queryParams.itemId = '';
	getListData();
	showPopup.value = false;
};
// 查询
const submit = () => {
	// queryParams.states = [parseInt(queryParams?.states)];
	getListData();
	showPopup.value = false;
};

const { getListData, list, scrollTop, showPopup, openPopup, closePopup } = useList({
	queryParams,
	api: {
		page: pageSeniorVioEvent
	}
});

const goDetail = (item) => {
	uni.navigateTo({
		url: '/pages/manage/detail?data=' + JSON.stringify(item)
	});
};

//新增
const add = () => {
	/* uni.navigateTo({
		url: `/pages/manage/add`
	}); */
	uni.switchTab({
		url: `/pages/manage/add`
	});
};

let EventList = ref([]);
let TypeList = ref([]);
let ItemList = ref([]);
onShow(() => {
	getListData();
	getDicts('approval_state').then((res) => {
		stateList.value = res.data.map((item) => ({
			dictLabel: item.dictLabel,
			dictValue: item.dictValue
		}));
	});
	pageVioEvents().then((res) => {
		EventList.value = res.data.rows;
	});
	pageVioType().then((res) => {
		TypeList.value = res.data.rows;
	});
	pageVioItem().then((res) => {
		ItemList.value = res.data.rows;
	});
});
</script>
<style lang="scss" scoped>
.custom-style {
	width: 200rpx;
}

.content {
	flex: 1;
	margin: 20rpx;
	border-radius: 20rpx;
}
</style>
